<template>
	<view class="main position-relative animated fadeIn faster">
		<view class="px-5 d-flex d-flex-middle" :style="{'paddingTop':$store.state.statusBarHeight+'px','height': $store.state.titleBarHeight + 'px'}" @click="goBack">
			<text class="icon-31fanhui1 iconfont"></text>
		</view>
		<view class="d-flex d-flex-column d-flex-center d-flex-middle" style="padding-top: 200rpx;">
			<image class="mb-10" src="/static/images/logo.png" style="width: 140rpx;height: 140rpx;"></image>
			<view class="mb-3" v-if="type==1">
				<view class="input-item d-flex d-flex-middle mb-3">
					<input v-model="phone" placeholder="请输入手机号码" type="number" placeholder-class="colorhold" />
				</view>
				<view class="input-item d-flex d-flex-between d-flex-middle">
					<input v-model="code" type="number" placeholder="短信验证码" placeholder-class="colorhold" />
					<view class="mr-3" @click="sendCode" :class="totalTime<60?'sending':'code-btn'">{{codeBtnText}}</view>
				</view>
			</view>
			
			<view class="mb-3" v-else>
				<view class="input-item d-flex d-flex-middle mb-3">
					<input v-model="accountName" placeholder="请输入账号" placeholder-class="colorhold" />
				</view>
				<view class="input-item d-flex d-flex-middle">
					<input v-model="password" placeholder="请输入密码" type="password" placeholder-class="colorhold" />
				</view>
			</view>
			
			<view class="d-flex-center">
				<view class="d-flex d-flex-top mb-3">
					<checkbox :checked="isChecked" style="transform:scale(0.6)" @click="isChecked = !isChecked"></checkbox>
					<view>
						<text class="font24 color999" @click="isChecked = !isChecked">我已阅读并同意</text>
						<text class="font24 colorlan" @click="privacy">《用户协议》</text>
						<text class="font24 color999">和</text>
						<text class="font24 colorlan" @click="privacy">《隐私条款》</text>
					</view>
				</view>
				<button class="wxbutton d-flex d-flex-middle d-flex-center" style="width: 600rpx;font-size: 36rpx;" @click="userLogin">登录</button>
				<view class="py-2 d-flex d-flex-center" @click="changType">
					<text class="color999 font26">{{type=='1'?'账号密码登录':'手机验证码登录'}}</text>
				</view>
			</view>
		</view>
		<view class="position-absolute left-0 right-0" style="bottom: 80rpx;">
			<view class="d-flex d-flex-center">
				<view class="d-flex d-flex-column d-flex-center d-flex-middle mr-5" @click="noAction">
					<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/yijiandenglu.png" style="width: 70rpx;height: 70rpx;"></image>
					<text class="mt-1 font26" style="color: #5a5655;">一键登录</text>
				</view>
				<view class="d-flex d-flex-column d-flex-center d-flex-middle mr-5" @click="noAction">
					<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/bootwx.png" style="width: 70rpx;height: 70rpx;"></image>
					<text class="mt-1 font26" style="color: #5a5655;">微信登录</text>
				</view>
				<view class="d-flex d-flex-column d-flex-center d-flex-middle" @click="noAction">
					<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/bootqq.png" style="width: 70rpx;height: 70rpx;"></image>
					<text class="mt-1 font26" style="color: #5a5655;">QQ登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { manner } from "@/util/manner.js";
	import { userApi } from '@/http/userApi.js';
	import { USER_TOKEN,REFRESH_TOKEN } from '@/constants/local-storage-key-const';
	export default {
		data() {
			return {
				isChecked:false,
				totalTime: 60,
				timer: null,
				codeBtnText: '发送验证码',
				accountName:'',
				phone:'',
				password:'',
				code:'',
				type:'1'
			}
		},
		methods: {
			changType(){
				this.accountName = ''
				this.password = ''
				this.phone = ''
				this.code = ''
				if(this.type == '1'){
					this.type = '3'
				}else{
					this.type = '1'
				}
			},
			wxlogin(){
				uni.navigateTo({
					url:'/pagesMain/login/login'
				})
			},
			privacy(){
				uni.navigateTo({
					// url:'/pagesMain/privacy/privacy'
					url:'/pagesMain/hobby/hobby'
				})
			},
			goBack(){
				manner.goBack()
			},
			async sendCode(){
				let that = this
				if(that.phone.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none',
					})
					return
				}
				if(that.totalTime == 60){
					try{
						uni.showLoading({
							title:'发送中'
						})
						await userApi.sendCode(that.phone)
						uni.hideLoading()
						that.startTimer()
					}catch(e){
						uni.hideLoading()
						console.log('error',e)
					}
				}
			},
			async userLogin(){
				let that = this
				let formData = {}
				if(that.type == '1'){
					if(that.phone.length != 11){
						uni.showToast({
							title:'请输入正确的手机号码',
							icon:'none',
						})
						return
					}
					if(that.code == ''){
						uni.showToast({
							title:'请输入短信验证码',
							icon:'none',
						})
						return
					}
					formData = {
						'phone':that.phone,
						'code':that.code,
						'type':that.type
					}
				}else{
					if(that.accountName == ''){
						uni.showToast({
							title:'请输入账号',
							icon:'none',
						})
						return
					}
					if(that.password == ''){
						uni.showToast({
							title:'请输入密码',
							icon:'none',
						})
						return
					}
					formData = {
						'accountName':that.accountName,
						'password':that.password,
						'type':that.type
					}
				}
				if(!that.isChecked){
					uni.showToast({
						title:'请同意用户隐私协议',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title:'登录中'
				})
				try{
					let udata = await userApi.userLogin(formData)
					uni.hideLoading()
					uni.setStorageSync(USER_TOKEN, udata.accessToken)
					uni.setStorageSync(REFRESH_TOKEN, udata.refreshToken)
					store.commit('setLogin',udata.userAccountVo)
					manner.goBack()
				}catch(e){
					uni.hideLoading()
				}
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.codeBtnText = `${this.totalTime}s后发送`;
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.codeBtnText = '发送验证码';
						this.totalTime = 60
				    } else {
				        this.totalTime--;
				        this.codeBtnText = `${this.totalTime}s后发送`;
				    }
				}, 1000);
			},
			noAction(){
				uni.navigateTo({
					url: '/pagesMain/Initial-info/Initial-info'
				})
				// uni.showToast({
				// 	title:'该功能暂未开启',
				// 	icon:'none'
				// })
			}
		}
	}
</script>

<style scoped>
.input-item{
	width: 550rpx;
	height: 94rpx;
	border: solid 1px #dcdcdf;
	border-radius: 60rpx;
	background-color: #ffffff;
	padding-left: 50rpx;
}
.code-btn{color: #70dec1}
.sending{color:#999}
</style>
